<template>
    <div class="login">
        <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>后台管理系统</span>
  </div>
  <el-form  label-width="80px" :model="form" ref="form">
    <el-form-item label="用户名" prop="username" :rules="[
        {required:ture ,message:'请输入用户名',trigger:'blur'},
        {min:4, max:10,message:'长度在4-10位字符之间'}]">
    <el-input v-model="form.username" ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" :rules="[
        {required:ture ,message:'请输入密码',trigger:'blur'},
        {min:6, max:12,message:'长度在6-12位字符之间'}]">
    <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="login('form')">登陆</el-button>
    </el-form-item>
    </el-form>
</el-card>
    
    </div>
</template>
<script lang="ts">
import {setToken} from '../utils/setToken.js'
import {login} from '../api/api'
import {IUserData} from '../types.d'
import Component from 'vue-class-component'
import Vue from 'vue'
@Component
export default class extends Vue{
    name = 'Login';
    form:IUserData = {
         username:'',
         password:''
    };           
login(form:any){
             (this.$refs[form] as any).validate((valid:any)=>{
                 if(valid){
                     login(this.form).then((res:any) =>{
                         if(res.data.status===200){
                               setToken('username',res.data.username)
                             setToken('token',res.data.token)
                             this.$message({message:res.data.message,type:'success'})
                             this.$router.push('/home')
                        }
                        console.log(res);
                        })
                     
                 }
                 else{
                     console.error(this.form);
                 }
             })
         }       
    }
</script>
<style lang="scss">
    .login{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgb(25, 148, 193);
        .box-card{
            width: 450px;
            margin: 200px auto;
            .el-card__header{
                font-size: 34px;
            }
            .el-button{
                width: 100%;
            }
        }
    }
</style>